<template>
  <el-drawer
    title="控件展示"
    v-model="isShow"
    custom-class="wld"
    direction="rtl"
    append-to-body
    size="60%"
  >
    <div style="margin: 10px">
      <component :is="name" v-if="name" v-bind="data" />
    </div>
  </el-drawer>
</template>

<script>

export default {
  name: 'WidgetListDrawer',
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  data() {
    return {
      name: '',
      data: {},
    }
  },
  computed: {
    isShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    initData(name){
      this.name = name
    }
  }
}
</script>

<style scoped></style>
